<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/my-involved-artshow.css"/>
		<link rel="stylesheet" type="text/css" href="../css/state-icons.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我参与的帮办</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="my-artPerfList">
				<!--<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="artshowImg mui-media-object mui-pull-left">
							<img src="../images/shuijiao.jpg" />
							<div class="infoBar">
								<span>5人报名</span>
							</div>
							<span class="type">雇佣</span>
						</div>
						<div class="mui-media-body">
							<h5 class="artshow-title">
								12月10日南城需要主持人
							</h5>
							<p class="artshow-info">
								<span>东莞</span>
								<span>12-08 至 12-13</span>
								<span>5天</span>
							</p>
							<p class="artshow-info">
								<label>发布价</label><span class="salary">1200.0</span> |
								<label>出价</label><span class="price">800</span>
							</p>
							<p class="artshow-state">
								<span class="sign-up-state s-state0 state-icon">停止报名</span>
								<span class="state state1 state-icon">待支付</span>
							</p>
						</div>
					</a>
				</li>-->
			</ul>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var artPerfList = document.getElementById("my-artPerfList");
			var lazyLoad = mui(artPerfList).imageLazyload({
				placeholder: '../images/holder2.png',
				autoDestroy: false
			});
			
			mui.plusReady(function() {
				getData();
				function getData() {
					Common.ajax({
						url : baseURL + 'myArtPerf/getEntryList/23.json'
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.state) {
							var data = data.result;
							if(data.length) {
								artPerfList.innerHTML = '';
								for(var i = 0; i < data.length; i++) {
									var headSrc = Common.artshowPic + data[i].perid + '.jpg' + '?' + Math.random();
									createArtPerfList(data[i].perid, headSrc, data[i].title, data[i].city,
										data[i].begin_time.substring(0, data[i].begin_time.indexOf(' ')),
										data[i].end_time.substring(0, data[i].end_time.indexOf(' ')),
										data[i].days, (data[i].salary / 100), (data[i].price / 100), data[i].state,
										data[i].signup_state, data[i].signup_num);
								}
								lazyLoad.refresh(true);
							} else {
								Common.showState(artPerfList, '&#xe608;', '你没有参加过任何帮办', 50);
							}
						} else {
							mui.toast('加载失败');
						}
					}, function(xhr) {
						Common.linkError();
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}
			
				mui('#my-artPerfList').on('tap', '.mui-table-view-cell', function() {
					Common.openWindow('artshow-detail.html', {
						artshowId: this.id,
						type : 2, // 1 为普通演艺详情
						state : this.state // 交易状态
					});
				})
				
				document.addEventListener('reload', function() {
					getData();
				})
			})
			/**
			 * @param {Object} id			演艺id
			 * @param {Object} src			图片路径
			 * @param {Object} title		演艺标题
			 * @param {Object} city			城市
			 * @param {Object} begin_time	开始时间
			 * @param {Object} end_time		结束时间
			 * @param {Object} days			持续天数
			 * @param {Object} salary		发布价格
			 * @param {Object} price		出价
			 * @param {Object} state		状态
			 * @param {Object} signup_state	报名状态
			 * @param {Object} signup_num	报名人数
			 */
			function createArtPerfList(id, src, title, city, begin_time, end_time, days, salary, price, state, signup_state, signup_num) {
				var item = document.createElement('li');
				item.id = id;
				item.state = state;
				item.price = price;
				item.className = 'mui-table-view-cell mui-media';
				var str = '<a href="javascript:;"><div class="artshowImg mui-media-object mui-pull-left">';
				str += '<img data-lazyload="' + src + '" /><div class="infoBar"><span>' + signup_num + '人报名</span></div>';
				if(state == 8) {
					str += '<span class="type">雇佣</span>';
				}
				str += '</div><div class="mui-media-body"><h5 class="artshow-title">' + title;
				str += '</h5><p class="artshow-info"><span>' + city + '</span><span> ' + begin_time + ' 至 ';
				str += end_time + '</span><span>' + days + '天' + '</span></p><p class="artshow-info"><label>';
				str += '发布价</label><span class="salary">' + salary + '</span> | <label>出价</label><span class="price">';
				str += price + '</span></p><p class="artshow-info"><span class="sign-up-state sign-up-state-' + signup_state + ' state-icon">';
				str += (signup_state ? '可报名' : '停止报名') + '</span><span class="state deal-state-' + state + ' state-icon">';
				str += Common.dealState[state] + '</span></p></div></a>';
				item.innerHTML = str;
				artPerfList.appendChild(item);
			}
		</script>
	</body>

</html>